<!DOCTYPE html>
<html lang="en" xml:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script th:src="@{js/jquery.min.js}"></script>
</head>
<body>
    <form>
        <input type="hidden" id="sessionId" th:value="${sessionId}">
        <textarea id="userMsg" name="userMsg" style="width: 85%"></textarea>
        <button id="send" type="button" onclick="chat()">发送</button>
    </form>
    <div id="history"></div>
    <script th:inline="javascript">
        function chat(){
            // 测试数据：查询云小宝，101的订单信息
            
            $("#send").attr("disabled","true")
            let data = {
                "userMsg": $("#userMsg").val(),
                "sessionId": $("#sessionId").val()
            }
            
            //处理用户数据
            $("#history").html($("#history").html() + "<div style='display: inline'>user:" + $("#userMsg").val() + "</div>");
            $("#userMsg").val("")
            $.ajax({
                url: "/chat.do",
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data),
                success: function (data){
                    $("#history").html($("#history").html() + "<button type='button' onclick=\"revoke('"+data[0].id+"', this)\">撤回</button>");
                    //处理AI返回值
                    $("#history").html($("#history").html() + "<div>AI:" + (data[1].text||data[1].content) + "<br></div>");
                    $("#send").removeAttr("disabled");
                },
                error: function (){
                    $("#send").removeAttr("disabled");
                }
            })
        }
        //撤回
        function revoke(id, b){
            $.ajax({
                url: "/revoke2/" + id,
                type: "DELETE",
                success: function (data){
                    $(b).prev("div").html("")
                    $(b).next("div").html("")
                    $(b).remove()
                },
            })
        }
    </script>
</body>
</html>
